<template>
  <view id="searchputbox">
    <!-- 头部 -->
    <view class="top-top">
      <view class="topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <view class="top-back" @click="backsearch()">
            <image src="../../static/resort/fanhui.png" mode=""
              style="height: 34rpx;width: 20rpx;padding-top: 35rpx;margin-right: 20rpx;">
            </image>
          </view>
          <view class="top-search">
            <view class="top-srarch-img">
              <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 20rpx;">
              </image>
            </view>
            <view>
              <input placeholder="输入您的需求" type="text" class="top-search-input">
            </view>
            <view @click="tocamera()">
              <image src="../../static/resort/camera.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 20rpx;">
              </image>
            </view>
            <view class="top-search-line">

            </view>
            <view class="top-search-text">
              搜索
            </view>
          </view>
          <view class="top-but">
            <button class="topbutton">发布需求</button>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 170rpx;">

    </view>
    <!-- 头部 -->
    <!-- 内容 -->
    <view class="center">
      <view class="centeritem" @click="tosearchputcent()">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          香蕉
        </view>
      </view>

      <view class="centeritem">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          <span style="color: black;">批发</span>香蕉
        </view>
      </view>

      <view class="centeritem">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          香蕉<span style="color: black;">原产地直销</span>
        </view>
      </view>

      <view class="centeritem">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          香蕉<span style="color: black;">10斤</span>
        </view>
      </view>

      <view class="centeritem">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          香蕉<span style="color: black;">全熟</span>
        </view>
      </view>

      <view class="centeritem">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          香蕉<span style="color: black;">片</span>
        </view>
      </view>

      <view class="centeritem">
        <view class="itemimg">
          <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
        </view>
        <view class="itemtext">
          <span style="color: black;">招收割</span>香蕉<span style="color: black;">临时工</span>
        </view>
      </view>
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      tosearchputcent() {
        uni.navigateTo({
          url: "/pages/resort/searchPutCent"
        })
      },
      backsearch() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss">
  // 头部
  .top-top {
    width: 100vw;
    z-index: 99;
    position: fixed;
    top: 0;
    background-color: white;
  }

  .topbox {
    width: 95%;
    margin: auto;

    .top-oneitem {
      width: 100%;
      height: var(--status-bar-height);
    }

    .top-twoitem {
      height: 100rpx;
      width: 100%;
      display: flex;

      .top-search {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 15rpx;
        margin-top: 14rpx;
        width: 65%;
        height: 75rpx;
        border-radius: 50rpx;
        background-color: #F1F1F1;

        .top-search-input {
          height: 32rpx;
          margin-top: 15rpx;
          width: 250rpx;
        }

        .top-search-line {
          height: 44rpx;
          border-right: solid 1px #BBBDBD;
          margin-top: 15rpx;
        }

        .top-search-text {
          color: #58719D;
          margin-top: 13rpx;
        }
      }

      .top-but {
        width: 35%;

        .topbutton {
          line-height: 60rpx;
          color: white;
          font-size: 32rpx;
          margin-top: 20rpx;
          width: 80%;
          height: 60rpx;
          text-align: center;
          background-color: #FF2A31;
        }
      }
    }
  }

  // 头部
  // 内容
  .center {

    .centeritem {
      width: 100vw;
      height: 100rpx;
      background-color: white;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      border-bottom: solid 4rpx rgb(235, 235, 235);

      .itemimg {
        padding-top: 10rpx;
        padding-right: 10rpx;
      }

      .itemtext {
        color: #FF333A;
        padding-top: 5rpx;
        font-size: 32rpx;
      }
    }
  }

  // 内容
</style>